<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak] {
            display: none;
        }
        *{
            margin:0;
            padding:0;
        }
        body{
            font-family:Microsoft YaHei;
            text-align:center;
        }
        li{
            list-style:none;
        }
        .bar{
            background-color:#5c9bb7;
            border-radius: 2px;
            width: 400px;
            padding: 14px;
            margin: 45px auto 20px;
            position:relative;
        }

        .bar input{
            background:#fff no-repeat 13px 13px;
            background-image:url();
            border: none;
            width: 100%;
            line-height: 19px;
            padding: 11px 0;
            border-radius: 2px;
            box-shadow: 0 2px 8px #c4c4c4 inset;
            text-align: left;
            font-size: 14px;
            font-family: inherit;
            color: #738289;
            font-weight: bold;
            outline: none;
            text-indent: 40px;
        }

        ul{
            list-style: none;
            width: 428px;
            margin: 0 auto;
            text-align: left;
        }

        ul li{
            border-bottom: 1px solid #ddd;
            padding: 10px;
            overflow: hidden;
        }

        ul li img{
            width:60px;
            height:60px;
            float:left;
            border:none;
        }

        ul li p{
            margin-left: 75px;
            font-weight: bold;
            padding-top: 12px;
            color:#6e7a7f;
        }
    </style>
    <script src="http://cdn.bootcss.com/vue/2.1.10/vue.js"></script>
</head>
<body>
<div class="app">
    <div class="bar">
        <input type="text" v-model="title" placeholder="Enter your search terms" />
    </div>
    <ul>
        <li v-for="a in newUsers">
            <a :href="a.url"><img :src="a.image" /></a>
            <p>{{a.title}}</p>
        </li>
    </ul>
</div>
</body>
<script>
    new Vue({
        el: '.app',
        data: {
            title: '',
            users: [
                {
                    "title": "What You Need To Know About CSS Variables",
                    "url": "http://tutorialzine.com/2016/03/what-you-need-to-know-about-css-variables/",
                    "image": "http://cdn.tutorialzine.com/wp-content/uploads/2016/03/css-variables-100x100.jpg"
                },
                {
                    "title": "Freebie: 4 Great Looking Pricing Tables",
                    "url": "http://tutorialzine.com/2016/02/freebie-4-great-looking-pricing-tables/",
                    "image": "http://cdn.tutorialzine.com/wp-content/uploads/2016/02/great-looking-pricing-tables-100x100.jpg"
                },
                {
                    "title": "20 Interesting JavaScript and CSS Libraries for February 2016",
                    "url": "http://tutorialzine.com/2016/02/20-interesting-javascript-and-css-libraries-for-february-2016/",
                    "image": "http://cdn.tutorialzine.com/wp-content/uploads/2016/02/interesting-resources-february-100x100.jpg"
                },
                {
                    "title": "Quick Tip: The Easiest Way To Make Responsive Headers",
                    "url": "http://tutorialzine.com/2016/02/quick-tip-easiest-way-to-make-responsive-headers/",
                    "image": "http://cdn.tutorialzine.com/wp-content/uploads/2016/02/quick-tip-responsive-headers-100x100.png"
                },
                {
                    "title": "Learn SQL In 20 Minutes",
                    "url": "http://tutorialzine.com/2016/01/learn-sql-in-20-minutes/",
                    "image": "http://cdn.tutorialzine.com/wp-content/uploads/2016/01/learn-sql-20-minutes-100x100.png"
                },
                {
                    "title": "Creating Your First Desktop App With HTML, JS and Electron",
                    "url": "http://tutorialzine.com/2015/12/creating-your-first-desktop-app-with-html-js-and-electron/",
                    "image": "http://cdn.tutorialzine.com/wp-content/uploads/2015/12/creating-your-first-desktop-app-with-electron-100x100.png"
                }
            ]
        },
        computed: {//2.0 过滤器写法有变，采用计算属性来制作
            newUsers: function () {
                var that = this;
                return this.users.filter(function (user) {
                    return user.title.toLowerCase().indexOf(that.title.toLowerCase()) !== -1;
                })
            }

        }
    });
</script>
</html>